<!doctype html>
<html class="no-js ">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>Amaze UI Admin index Examples</title>
		<meta name="description" content="这是一个 index 页面">
		<meta name="keywords" content="index">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="renderer" content="webkit">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<link rel="icon" type="image/png" href="assets/i/favicon.png">
		<link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
		<meta name="apple-mobile-web-app-title" content="Amaze UI" />
		<link rel="stylesheet" href="assets/css/amazeui.css" />
		<link rel="stylesheet" href="assets/css/admin.css">
		<style>
			body {
				background-color: #eee;
			}
			form {
				margin-top: 20%;
				box-shadow: 0 0 14px rgba(0, 0, 0, 0.1);
				background-color: #fff;
			}
			footer{
				position: fixed;
				bottom: 0;
				width: 100%;
			}
		  #vld-tooltip {
		    position: absolute;
		    z-index: 1000;
		    padding: 5px 10px;
		    background: #F37B1D;
		    min-width: 150px;
		    color: #fff;
		    transition: all 0.15s;
		    box-shadow: 0 0 5px rgba(0,0,0,.15);
		    display: none;
		  }
		
		  #vld-tooltip:before {
		    position: absolute;
		    top: -8px;
		    left: 50%;
		    width: 0;
		    height: 0;
		    margin-left: -8px;
		    content: "";
		    border-width: 0 8px 8px;
		    border-color: transparent transparent #F37B1D;
		    border-style: none inset solid;
		  }

		</style>
	</head>

	<body>

			<div class="am-g am-u-lg-4 am-u-md-8 am-u-sm-centered">

				<form class="am-form" id="login">
					<fieldset class="">
						<legend class="am-margin-top-sm am-text-center">SIGN IN</legend>
						<div class="am-form-group">
							<label for="doc-vld-name-2-0">帐号：</label>
							<input class="am-radius" type="text" id="doc-vld-name-2-0" minlength="3" placeholder="输入用户名（至少 3 个字符）" required/>
						</div>

						<div class="am-form-group">
							<label for="doc-vld-pwd-1-0">密码：</label>
							<input class="am-radius" type="password" id="doc-vld-pwd-1-0" placeholder="请输入密码" pattern="^\d{6}$" required data-foolish-msg="请输入密码" />
						</div>

						<div class="am-form-group">
							<button type="submit" class="am-btn am-btn-success am-radius am-btn-block">提交</button>
						</div>
						
					</fieldset>
				</form>
			</div>

		<footer class="am-footer am-footer-default">

			<div class="am-footer-miscs am-vertical-align-bottom">
				<p>由 <a href="http://www.feihuang.org/" title="诺亚方舟" target="_blank" class="">飞煌科技</a> 提供技术支持</p>
				<p>CopyRight©2016 FeiHuang.org Inc.</p>
			</div>
			</footer>
			<script src="assets/js/jquery.min.js"></script>
			<script type="text/javascript" src="assets/js/amazeui.min.js"></script>

	<script language="JavaScript">
		$(function() {
		  var $form = $('#form-with-tooltip');
		  var $tooltip = $('<div id="vld-tooltip">提示信息！</div>');
		  $tooltip.appendTo(document.body);
		
		  $form.validator();

		  var validator = $form.data('amui.validator');

		  $form.on('focusin focusout', '.am-form-error input', function(e) {
		    if (e.type === 'focusin') {
		      var $this = $(this);
		      var offset = $this.offset();
		      var msg = $this.data('foolishMsg') || validator.getValidationMessage($this.data('validity'));

		      $tooltip.text(msg).show().css({
		        left: offset.left + 10,
		        top: offset.top + $(this).outerHeight() + 10
		      });
		    } else {
		      $tooltip.hide();
		    }
		  });
		});
	</script>
	</body>
</html>